<template>
  <a-popover
    placement="rightTop"
    trigger="click"
    :visible="show"
    @visibleChange="visibleChange"
  >
    <!-- 搜索框内容 -->
    <div slot="content" class="popover-content">
      <template>
        <div class="item-title first-title">设置迭代次数</div>
        <a-input-number
          v-model="numberOfIterations"
          :min="0"
          :max="100"
          :precision="0"
          size="small"
        ></a-input-number>
        <div class="search-path-btn">
          <a-button class="set-btn" size="small" @click="cancel">取消</a-button>
          <a-button class="set-btn" type="primary" size="small" @click="confirm"
            >确定</a-button
          >
        </div>
      </template>
    </div>
    <!-- icon -->
    <a-tooltip placement="left">
      <span slot="title">社团检测</span>
      <span class="graph-content-btn" :class="{ 'icon-active': show }">
        <a-icon-font :class="{ active: show }" type="iconshetuanjiance" />
      </span>
    </a-tooltip>
  </a-popover>
</template>

<script lang="ts">
/**
 * 社团检测  气泡卡片
 */
import { Component, Vue, Prop } from 'vue-property-decorator'

@Component({})
export default class CommunityDetectionPopover extends Vue {
  @Prop({ type: Array, default: () => [] }) nodeList?: any[] // 选择的节点
  @Prop({ type: Boolean, default: false }) show: boolean = false

  // 设置迭代次数
  public numberOfIterations: any = 20 // 配置项

  public visibleChange(visible: boolean) {
    // 延时隐藏
    if (!visible) {
      setTimeout(() => {
        this.$emit('visible-change', visible)
      }, 200)
    } else {
      this.$emit('visible-change', visible)
    }
  }

  public cancel() {
    this.$emit('cancel')
  }
  public confirm() {
    if (typeof this.numberOfIterations !== 'number') {
      this.$message.warning('请输入迭代次数！')
      return
    }
    this.$emit('confirm', this.numberOfIterations)
  }
}
</script>

<style scoped lang="less">
// 两点之间路径查询
.popover-content {
  color: #5d637e;
  font-size: 12px;

  // item 标题
  .item-title {
    border-top: 1px solid #efefef;
    margin-top: 8px;
    padding: 8px 0;
  }

  .first-title {
    border-top: 1px solid transparent;
    margin-top: 0;
    padding-top: 0;
  }

  // 没有选择节点
  .empty-node-list {
    width: 100%;
  }

  .search-path-btn {
    display: flex;
    justify-content: flex-end;
    padding-top: 8px;

    .set-btn {
      margin-left: 8px;
    }
  }
}

/deep/.ant-input-number {
  width: 100%;
}

.graph-content-btn {
  align-items: center;
  border: 1px solid #fff;
  border-radius: 4px;
  color: #5d637e;
  cursor: pointer;
  display: flex;
  font-size: 16px;
  padding: 8px;
  position: relative;

  &:hover {
    background-color: rgba(105, 115, 255, 0.1);
    border: 1px solid rgba(105, 115, 255, 0.1);
  }
}

// 功能激活，
.active {
  color: #6973ff;
}

.icon-active {
  border: 1px solid rgba(105, 115, 255, 0.1);
}
</style>
